<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-07-30 16:22:31
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-08-01 14:51:21
 * @FilePath: \vue3-admin-node\vue3-admin\src\views\message\message_list\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="module-common-wrapped">
        <div class="module-common-content">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="公告管理" name="first">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="search-wrapped">
                                    <el-select style="width:200px" v-model="department" placeholder="请选择部门"
                                        @change="getListByDepartment">
                                        <el-option v-for="item in options" :key="item" :label="item" :value="item" />
                                    </el-select>
                                    <el-radio-group v-model="radio2" class="ml-4 radio-wrapper"
                                        @change="getMessageListByLevel">
                                        <el-radio label="一般">一般</el-radio>
                                        <el-radio label="重要">重要</el-radio>
                                        <el-radio label="必要">必要</el-radio>
                                    </el-radio-group>
                                </div>
                                <div class="button-wrapped">
                                    <el-button type="primary" plain @click="getCompanyFirstPageList">全部公告</el-button>
                                    <el-button type="primary" @click="createMessage(1)">发布公告</el-button>
                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-table">
                                <el-table :data="companyTableData" border style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="message_title" label="公告主题" width="320" />
                                    <el-table-column prop="message_category" label="类别" />
                                    <el-table-column prop="message_publish_department" label="发布部门" />
                                    <el-table-column prop="message_publish_name" label="发布人" />
                                    <el-table-column prop="message_receipt_object" label="接收对象" />
                                    <el-table-column prop="message_level" label="公告等级" />
                                    <el-table-column prop="message_publish_time" label="发布时间" width="200">
                                        <template #default="{ row }">
                                            <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="message_update_time" label="最新编辑时间" width="200">
                                        <template #default="{ row }">
                                            <div>{{ row.message_update_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="message_click_number" label="阅读人数" />
                                    <el-table-column label="操作" width="200" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="success" @click="editMessage(1, row)">编辑</el-button>
                                                <el-popconfirm title="确定删除?" @confirm="deleteMessage(row)">
                                                    <template #reference>
                                                        <el-button type="danger">删除</el-button>
                                                    </template>
                                                </el-popconfirm>

                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination @current-change="getData" @size-change="getData(1)"
                                v-model:current-page="paginationData.companyCurrentPage"
                                v-model:page-size="paginationData.companyPageCount" :page-sizes="[3, 5, 7, 10]"
                                background layout="prev,pager,next,jumper,-> ,sizes,total"
                                :total="paginationData.companyTotal" />
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="系统消息" name="second">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="search-wrapped">
                                </div>
                                <div class="button-wrapped">
                                    <el-button type="primary" @click="createMessage(2)">发布系统消息</el-button>
                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-table">
                                <el-table :data="systemTableData" border style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="message_title" label="消息主题" />
                                    <el-table-column prop="message_publish_name" label="发布者" />
                                    <el-table-column prop="message_click_number" label="阅读人数" />
                                    <el-table-column prop="message_publish_time" label="发布时间" width="200">
                                        <template #default="{ row }">
                                            <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>


                                    <el-table-column label="操作" width="200" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="success"
                                                    @click="editSystemMessage(2, row)">编辑</el-button>
                                                <el-popconfirm title="确定删除?" @confirm="deleteMessage(row)">
                                                    <template #reference>
                                                        <el-button type="danger">删除</el-button>
                                                    </template>
                                                </el-popconfirm>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination :page-size="1" :current-page="paginationData.systemCurrentPage"
                                :pager-count="7" :total="paginationData.systemTotal"
                                :page-count="paginationData.systemCount" @current-change="systemCurrentChange"
                                layout="prev, pager, next" />
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <createedit ref="createeditRef" @success="allGetData"></createedit>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { companyMessageList, firstDelete, systemMessageList } from '@/api/message/index'
import type { companyMessageListForm } from '@/api/message/type'
import createedit from '../components/create_edit.vue'
import { ElMessage } from 'element-plus'
import { getDepartment } from '@/api/setting/index'
import {changeUserReadListButDelete,changeUserReadList} from '@/api/dep_msg/index'
import {useMsg} from '@/store/modules/message'
const msgStore = useMsg()
const activeName = ref('first')
const department = ref('')
const radio2 = ref()
const options = ref([])
const returnDepartment = async () => {
    const res = await getDepartment()
    if (res.status == 0) {
        options.value = JSON.parse(res.data)
    }
}

onMounted(() => {
    getData(1)
    systemGetData()
    returnDepartment()
})
const allGetData = () => {
    getData(1)
    systemGetData()
}
const  getListByDepartment = ()=>{
    getData(1)
}
const getMessageListByLevel = ()=>{
     getData(1)
}
//全部公告
const getCompanyFirstPageList = () => {
    department.value = ''
    radio2.value  = ''
    getData(1)

 }
const companyTableData = ref([])
const getData = async (page: number) => {
    let data: companyMessageListForm = {
        page: page ? page : paginationData.companyCurrentPage,
        pageSize: paginationData.companyPageCount
    }
    if (department.value != '') {
        data['message_publish_department'] = department.value
    }
    if (radio2.value != '') {
        data['message_level'] = radio2.value
    }
    const res = await companyMessageList(data)
    if (res.status == 0) {

        companyTableData.value = res.data.list
        paginationData.companyTotal = res.data.total
    }
}

//发布公告
const createeditRef = ref()
const createMessage = (type: number) => {
    createeditRef.value.open(type)
}



//编辑
const editMessage = (type: number, row: any) => {
    createeditRef.value.open(type, row)
}
//删除
const deleteMessage = async (row: any) => {
    const res = await firstDelete(row.id)
    if (res.status == 0) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        let data:any  = {
            deleteId:row.id,
            department:department.value
        }
        await changeUserReadListButDelete(data)
        msgStore.returnReadList(localStorage.getItem('id'))
        allGetData()
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}

const paginationData = reactive({
    companyCurrentPage: 1,
    companyTotal: 0,
    companyPageCount: 5,
    systemCurrentPage: '',
    systemTotal: '',
    systemCount: '',
})

const companyCurrentChange = () => { }


//----------------系统消息
const systemTableData = ref([])
const systemGetData = async () => {
    const res = await systemMessageList()
    if (res.status == 0) {
        systemTableData.value = res.data
    }
}
//编辑
const editSystemMessage = (type: number, row: any) => {
    createeditRef.value.open(type, row)
}

const systemCurrentChange = () => { }

</script>

<style lang="scss" scoped>
@import url('@/assets//css/common.scss');

.radio-wrapper {
    display: flex;
}


:deep(.el-table .cell) {
    font-weight: 400;
}
</style>
<style lang="scss">
.el-radio-group {
    display: flex !important;
    margin-left: 20px;
    flex-wrap: nowrap;
}
</style>
